<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>
    <script src="js/jquery.min.js"></script>
    <link rel="stylesheet" href="js/layui/css/layui.css">
    <script src="js/layui/layui.all.js"></script>
    <script src="js/loginjs/cunchu.js"></script>
    <script src="js/layui/layui.js"></script>
</head>
<style>
    body .aux-self {padding: 20px;}
    body .aux-self .layui-input-block{float: left;margin-left: 0;}
    body .aux-self .layui-form-label{width: 90px;}
    .aux-self-word{padding: 8px 10px;float: left; margin-left: 20px; border: 1px solid #e6e6e6;width: 220px;color: #ff1010;
        display: none;}
</style>
<body>
<div class="modify-pwd-layer aux-self" id="modifypwdlayer">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">原密码</label>
            <div class="layui-input-block">
                <input id="mopwd" type="password" name="title" required  lay-verify="required" autofocus placeholder="请输入原密码" autocomplete="off" class="layui-input">
            </div>
            <div id="mopwd-aux" class="aux-self-word"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">新密码</label>
            <div class="layui-input-block">
                <input id="newpwd1" type="password" name="title" required  lay-verify="required" placeholder="请输入原密码" autocomplete="off" class="layui-input">
            </div>
            <div id="newpwd1-aux" class="aux-self-word"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">再次输入</label>
            <div class="layui-input-block">
                <input id="newpwd2" type="password" name="title" required  lay-verify="required" placeholder="请输入原密码" autocomplete="off" class="layui-input">
            </div>
            <div id="newpwd2-aux" class="aux-self-word"></div>
        </div>
    </form>
    <button type="button" class="layui-btn layui-btn-normal" onclick="updatePasword()">修改密码</button>
</div>
<script type="text/javascript">
    var token= localStorage.getExpire("token");
/*    $(function () {
        showModifyLayer();
    })*/
    function updatePasword() {
        URL='http://localhost:8601/';
        var jiumima=$("#mopwd").val();
        var password=$("#newpwd1").val();
        $.ajax({
            xhrFields: {
                withCredentials: true
            },
            headers:{"Authorization":token},
            url:URL+"updatePasword",
            data:{user_password:password,user_nickname:jiumima},
            dataType: 'json',
            type: 'post',
            success: function (data) {
                if(data==1){
                    layer.msg('成功200', {
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    }, function () {
                        location.reload(true);
                    })
                }else{
                    layer.msg(data.msg, {time: 3000});
                }
            }
        })
    }
    function showModifyLayer() {
        let index = layer.open({
            type: 1,
            btn: ['取消','确定'],
            title: "修改密码",
            area: ["660px", "320px"],
            content: $("#modifypwdlayer"),
            success: function(layero, index){
                $(document).on('keydown', function(e){
                    if(e.keyCode == 13){
                        deleteFile(index);
                    }
                })
                getModifyPwd()
            },
            cancel: function(index, layero){
                $("#mopwd").val("")
                $("#mopwd-aux").css("display", "none")
                $("#newpwd1").val("")
                $("#newpwd1-aux").css("display", "none")
                $("#newpwd2").val("")
                $("#newpwd2-aux").css("display", "none")
            },
            yes: function (index) {
                layer.close(index);
            },btn2: function (index) {
                confirmModifyPwd(index)
                return false
            }
        });
    }
    function getModifyPwd() {
        var pwd
        $("#mopwd").blur(function () {
            let mopwd = $("#mopwd").val().trim();
            if (mopwd.length == 0) {
                $("#mopwd-aux").css({
                    display: "block",
                    color: "#ff1010",
                }).html("请输入原密码")
            } else {
                //发送ajax获得原密码 pwd
                pwd = 1

                if (mopwd != pwd) {
                    $("#mopwd-aux").css({
                        display: "block",
                        color: "#ff1010",
                    }).html("密码不正确")
                } else {
                    $("#mopwd-aux").css({
                        display: "block",
                        color: "#5FB878"
                    }).html("输入正确")
                }
            }
        })

        var newpwd1 = $("#newpwd1").val().trim()
        $("#newpwd1").blur( function () {
            newpwd1 = $("#newpwd1").val().trim()
            if (newpwd1.length == 0) {
                $("#newpwd1-aux").css({
                    display: "block",
                    color: "#ff1010"
                }).html("请输入新密码")
            } else {
                $("#newpwd1-aux").css({
                    display: "block",
                    color: "#5FB878"
                }).html("输入正确")
            }
        })

       $("#newpwd2").focus(function(){
            let newpwd1 = $("#newpwd1").val().trim()
            if (newpwd1.length == 0) {
            $("#newpwd1-aux").css({
                display: "block",
                color: "#ff1010"
            }).html("请输入新密码")
        }
    })
        $("#newpwd2").blur( function () {
            let newpwd2 = $("#newpwd2").val().trim()
            if (newpwd2.length == 0) {
                $("#newpwd2-aux").css({
                    display: "block",
                    color: "#ff1010"
                }).html("请输入新密码")
            } else if (newpwd1 != newpwd2) {
                $("#newpwd2-aux").css({
                    display: "block",
                    color: "#ff1010"
                }).html("两次输入不一致")
                $("#newpwd1-aux").css({
                    display: "block",
                    color: "#ff1010"
                }).html("两次输入不一致")

            } else if (newpwd1 == newpwd2 && newpwd1 == pwd) {
                $("#newpwd2-aux").css({
                    display: "block",
                    color: "#ff1010"
                }).html("新密码不能与原密码相同")
                $("#newpwd1-aux").css({
                    display: "block",
                    color: "#ff1010"
                }).html("新密码不能与原密码相同")
            } else {
                $("#newpwd1-aux").css({
                    display: "block",
                    color: "#5FB878"
                }).html("输入正确")
                $("#newpwd2-aux").css({
                    display: "block",
                    color: "#5FB878"
                }).html("输入正确")
                $("#adduserlayer").data("new_pwd", newpwd1)
            }
        });
    }
</script>
</body>
</html>